<template>
    <div class="error-page">
        <div class="error-content">
            <div class="error-icon">
                <div class="lock">
                    <div class="lock-body"></div>
                    <div class="lock-hole"></div>
                    <div class="lock-chain"></div>
                </div>
            </div>
            <h1>403</h1>
            <h2>访问被拒绝</h2>
            <p>抱歉，您没有权限访问此页面</p>
            <div class="actions">
                <button class="btn btn-primary" @click="goBack">
                    <i class="fas fa-arrow-left"></i>
                    返回上一页
                </button>
                <button class="btn btn-default" @click="goHome">
                    <i class="fas fa-home"></i>
                    返回首页
                </button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineOptions} from 'vue';
import { useRouter } from 'vue-router'
defineOptions({
    name: 'Error403Page'
})

const router = useRouter()

const goBack = () => {
    router.back()
}

const goHome = () => {
    router.push('/')
}
</script>

<style lang="less" scoped>
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
    font-family: 'Inter', sans-serif;

    .error-content {
        text-align: center;
        padding: 40px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(245, 108, 108, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        max-width: 500px;
        width: 90%;

        .error-icon {
            width: 120px;
            height: 120px;
            margin: 0 auto 20px;
            position: relative;
            animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both infinite;
            transform: translate3d(0, 0, 0);
            
            .lock {
                position: relative;
                width: 80px;
                height: 100px;
                margin: 0 auto;
                
                &-body {
                    width: 100%;
                    height: 70px;
                    background: #f56c6c;
                    border-radius: 10px;
                    position: absolute;
                    bottom: 0;
                }
                
                &-hole {
                    width: 40px;
                    height: 40px;
                    background: #f56c6c;
                    border-radius: 50%;
                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    border: 10px solid #fff5f5;
                }
            }
        }

        h1 {
            font-size: 80px;
            background: linear-gradient(45deg, #f56c6c, #ff9f9f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 0;
            line-height: 1.2;
            text-shadow: 2px 2px 10px rgba(245, 108, 108, 0.1);
        }

        h2 {
            font-size: 28px;
            color: #2c3e50;
            margin: 20px 0;
            font-weight: 600;
        }

        p {
            color: #606266;
            margin-bottom: 30px;
            font-size: 16px;
            line-height: 1.6;
        }

        .actions {
            display: flex;
            gap: 16px;
            justify-content: center;
        }

        .btn {
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 500;
            border: 2px solid transparent;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 8px;

            i {
                font-size: 16px;
            }

            &.btn-primary {
                background: linear-gradient(45deg, #f56c6c, #ff9f9f);
                color: white;
                
                &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
                }
            }

            &.btn-default {
                background: white;
                border-color: #dcdfe6;
                color: #606266;

                &:hover {
                    color: #f56c6c;
                    border-color: #f56c6c;
                    background: #fff5f5;
                    transform: translateY(-2px);
                }
            }
        }
    }
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

// 响应式设计
@media (max-width: 480px) {
    .error-page {
        .error-content {
            padding: 30px 20px;
            
            .actions {
                flex-direction: column;
                gap: 12px;
                
                .btn {
                    width: 100%;
                    justify-content: center;
                }
            }
        }
    }
}
</style>